<template>
  <el-dialog
    title="查看评价"
    width="50%"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div>评价状态：
      <span v-if="dataList.commCate == 1">好评</span>
      <span v-if="dataList.commCate == 2">中评</span>
      <span v-if="dataList.commCate == 3">差评</span>
    </div>
    <div style="margin: 20px 0">服务态度
      <el-rate
        v-model="dataList.attitudeScore"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}">
      </el-rate>
    </div>
    <div style="margin: 20px 0">服务速度
      <el-rate
        v-model="dataList.speedScore"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}">
      </el-rate>
    </div>
    <div>
      评价内容:
      {{dataList.content}}
    </div>
    <div style="margin: 20px 0" v-if="dataList.images&&dataList.images.length>0">详情：
      <viewer :images="dataList.images">
        <img width="88" height="58" v-for="(item, index) in dataList.images" :src="item" :key="index"/>
      </viewer>
      <span class="item"></span>
    </div>
<!--    <div style="margin-top: 20px">-->
<!--      <el-input type="textarea" v-model="reply"></el-input>-->
<!--      <div style="margin-top: 20px">-->
<!--        <el-button type="primary" size="small" @click="replyMessage">回复</el-button>-->
<!--&lt;!&ndash;        <el-button @click="hide" size="small">删除</el-button>&ndash;&gt;-->
<!--      </div>-->
<!--    </div>-->
  </el-dialog>
</template>
<script>
  import {commentdetail, commenthide, commentreply} from '@/api/order/order'

  export default {
    data() {
      return {
        visible: false,
        dataList: {},
        reply: '',
        dataForm: {
          orderId: '',
        },
      }
    },
    components: {},
    methods: {
      init(orderId) {
        this.reply = ''
        this.dataForm.orderId = orderId
        this.visible = true
        this.commentdetailList()
      },
      commentdetailList() {
        const params = new FormData()
        params.append('orderId', this.dataForm.orderId)
        commentdetail(params).then(res => {
          console.log(res)
          this.dataList = res.data.comment
        })
      },
      hide() {
        const params = new FormData()
        params.append('orderId', this.dataForm.orderId)
        commenthide(params).then(res => {
          if(res.data.code = 200){
            this.$message({
              message: '删除成功',
              type: 'success',
            });
            this.visible = false
          }
        })
      },

      replyMessage() {
        const params = new FormData()
        params.append('orderId', this.dataForm.orderId)
        params.append('reply', this.reply)
        commentreply(params).then(res => {
          if(res.data.code = 200){
            this.$message({
              message: '回复成功',
              type: 'success',
            });
            this.visible = false
          }
        })
      },
    }
  }
</script>
<style scoped>
  .item {
    white-space: nowrap;
    margin-right: 40px;
    line-height: 30px;
  }

  .title {
    font-size: 16px;
    border-bottom: solid 1px #ccc;
    line-height: 30px;
  }

  .btn {
    margin-top: 5px;
  }
</style>
